<template>
  <div class="app-wrapper">
    <networkhead />
    <div class="content">
      <div class="title">创建工程</div>
      <div class="main">
        <el-form ref="createList" :model="createList" :rules="createListRules" auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>工程名称</label>
              <el-form-item prop="name">
                <el-input
                  ref="name"
                  v-model="createList.name"
                  placeholder="请输入内容"
                  type="text"
                  name="name"
                  tabindex="1"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>项目类型</label>
              <el-select v-model="createList.projectType" placeholder="请选择">
                <el-option
                  v-for="item in projectTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="row">
              <label>工程造价</label>
              <el-form-item prop="projectCost">
                <el-input
                  v-model="createList.projectCost"
                  placeholder="请输入工程造价"
                  type="text"
                  name="projectCost"
                  tabindex="2"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>

          <div class="tab">
            <div class="row">
              <label>简介</label>
              <el-form-item prop="description">
                <el-input
                  v-model="createList.description"
                  type="textarea"
                  :rows="4"
                  resize="none"
                  placeholder="请输入简介"
                  name="description"
                  maxlength="500"
                  tabindex="3"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>

          <div class="tab">
            <div class="row">
              <label>计划时间</label>
              <div class="block">
                <el-date-picker
                  v-model="dataTime"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </div>
            </div>
            <div class="row">
              <label>设计单位</label>
              <el-form-item prop="designUnit">
                <el-input
                  v-model="createList.designUnit"
                  placeholder="请输入"
                  name="designUnit"
                  tabindex="4"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>施工单位</label>
              <el-form-item prop="constructionUnit">
                <el-input
                  v-model="createList.constructionUnit"
                  placeholder="请输入"
                  name="constructionUnit"
                  tabindex="5"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>

          <div class="tab">
            <div class="row">
              <label>建设单位</label>
              <el-form-item prop="buildUnit">
                <el-input
                  v-model="createList.buildUnit"
                  placeholder="请输入"
                  name="buildUnit"
                  tabindex="6"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>监理单位</label>
              <el-form-item prop="supervisorUnit">
                <el-input
                  v-model="createList.supervisorUnit"
                  placeholder="请输入"
                  name="supervisorUnit"
                  tabindex="7"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>勘察单位</label>
              <el-form-item prop="surveyUnit">
                <el-input
                  v-model="createList.surveyUnit"
                  placeholder="请输入"
                  name="surveyUnit"
                  tabindex="8"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>

          <div class="tab">
            <div class="row">
              <label>工程状态</label>
              <el-select v-model="createList.status" placeholder="请选择">
                <el-option
                  v-for="item in typeStetusList"
                  :key="item.type"
                  :label="item.name"
                  :value="item.type"
                />
              </el-select>
            </div>
            <div class="row">
              <label>建筑面积(㎡)</label>
              <el-form-item prop="builtArea">
                <el-input
                  v-model="createList.builtArea"
                  placeholder="请输入"
                  name="builtArea"
                  tabindex="5"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row" />
          </div>
          <div class="btnsubmit">
            <el-button
              type="primary"
              class="create"
              @click.native.prevent="submitData"
            >创建</el-button>
            <el-button
              type="primary"
              class="cancel"
              @click="cancel"
            >取消</el-button>
          </div>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import Networkhead from './components/index'
import { createProject, getProjectType } from '@/api/project'
export default {
  name: 'CreateNetwork',
  components: {
    Networkhead
  },
  data() {
    return {
      dataTime: [],
      createList: {
        name: null,
        projectType: null,
        projectCost: null,
        description: null,
        planStartTime: null,
        planCompletionTime: null,
        designUnit: null,
        constructionUnit: null,
        buildUnit: null,
        supervisorUnit: null,
        surveyUnit: null,
        status: null,
        builtArea: null
      },
      projectTypeList: [
        // { type: '1', name: '工程类型1' },
        // { type: '2', name: '工程类型2' },
        // { type: '3', name: '工程类型3' }
      ],
      typeStetusList: [
        { type: 'before', name: '未开工' },
        { type: 'inProgress', name: '施工中' },
        { type: 'finshed', name: '已完成' }
      ],
      createListRules: {
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        projectCost: [
          { required: true, message: '必填', trigger: 'blur' },
          { pattern: /(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/, message: '只能输入数字或者数字加小数点后两位' }
        ],
        description: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        designUnit: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        constructionUnit: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        buildUnit: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        supervisorUnit: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        surveyUnit: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        builtArea: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  computed: {

  },
  mounted() {
    // 默认时间选择
    var date = new Date()
    var s1 = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate())
    var s2 = date.getFullYear() + '-' + (date.getMonth() + 4) + '-' + (date.getDate())
    this.createList.planStartTime = s1
    this.createList.planCompletionTime = s2
    this.dataTime.push(this.createList.planStartTime)
    this.dataTime.push(this.createList.planCompletionTime)
    // 默认下拉框选择第一个
    this.createList.status = this.typeStetusList[0].type
    this.getProjectType()
  },
  methods: {
    cancel() {
      this.$router.go(-1)
    },
    // 工程单类型
    async getProjectType() {
      const res = await getProjectType()
      if (res.code === 200) {
        this.projectTypeList = res.data
        if (this.projectTypeList.length > 0) {
          this.createList.projectType = this.projectTypeList[0].id
        }
      } else {
        this.$message({
          message: '工程单类型查询出错!',
          type: 'error',
          showClose: true,
          duration: 2 * 1000
        })
      }
    },
    submitData() {
      this.$refs.createList.validate(valid => {
        if (valid) {
          this.loading = true
          createProject(this.createList).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'error',
                message: '创建工程成功!',
                showClose: true,
                duration: 2 * 1000
              })
              this.$router.push('/')
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        font-size:18px;
        font-weight:600;
        color:rgba(255,255,255,0.85);
        width: 100%;
        padding: 30px 0 20px 128px;
        border-bottom: 1px solid rgba(221,221,221,0.2);
      }
      .main{
        margin: 24px 128px 0 128px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
      }
      .btnsubmit{
        text-align: center;
        margin-top: 60px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
    }
  }
</style>
